<template>
	<div class="view">
		<template>
			<Top :title="'招聘信息编辑'"></Top>
		</template>
		<div class="main">
			<div class="main_con">
				<div class="main_title">招聘信息编辑</div>
				<div class="main_view">
					<el-form label-position="top" :model="form" ref="form" :rules="rules">
						<el-form-item label="所属企业" prop="title">
							<el-select v-model="form.aid" placeholder="请选择" style="width: 400px;">
								<el-option
								v-for="(item,index) in companyList"
								:key="item.aid"
								:label="item.title"
								:value="item.aid">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="职位名称" prop="title">
							<el-input class="input" v-model="form.title"></el-input>
						</el-form-item>
						<el-form-item label="所属行业" prop="hangye">
							<el-select v-model="form.hangye" placeholder="请选择" style="width: 400px;" @change="hangyeChange">
								<el-option
								v-for="(item,index) in hangyeList"
								:key="item.id"
								:label="item.sort"
								:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="招聘岗位" prop="gangwei">
							<el-select v-model="form.gangwei" placeholder="请选择" style="width: 400px;">
								<el-option
								v-for="(item,index) in gangweiList"
								:key="item.id"
								:label="item.sort"
								:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="职位要求" prop="need">
							<el-input type="textarea" :rows="5" class="input" v-model="form.need"></el-input>
						</el-form-item>
						<el-form-item label="工作内容" prop="workCnt">
							<el-input type="textarea" :rows="5" class="input" v-model="form.workCnt"></el-input>
						</el-form-item>
						<el-form-item label="工作形式" prop="workType">
							<el-select v-model="form.workType" placeholder="请选择" style="width: 400px;">
								<el-option
								v-for="(item,index) in workTypeList"
								:key="item.id"
								:label="item.sort"
								:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="学历要求" prop="workEducation">
							<el-select v-model="form.workEducation" placeholder="请选择" style="width: 400px;">
								<el-option
								v-for="(item,index) in workEducationList"
								:key="item.id"
								:label="item.sort"
								:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="工作时间" prop="workTime">
							<el-select v-model="form.workTime" placeholder="请选择" style="width: 400px;">
								<el-option
								v-for="(item,index) in workTimeList"
								:key="item.id"
								:label="item.sort"
								:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="工作经验" prop="workExperience">
							<el-select v-model="form.workExperience" placeholder="请选择" style="width: 400px;">
								<el-option
								v-for="(item,index) in workExperienceList"
								:key="item.id"
								:label="item.sort"
								:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="日薪" prop="workSalary">
							<el-input class="input" v-model="form.workSalary" style="width: 325px;" :disabled="form.isMianyi=='1'"></el-input>
							<el-radio v-model="form.isMianyi" label="1" border style="width: 75px;" @click.native.prevent="clickIsMianyi">面议</el-radio>
						</el-form-item>

						<el-form-item label="工作城市/区" prop="city">
							<el-cascader
							size="large"
							:options="options"
							v-model="selectedOptions"
							@change="addressChange" style="width: 400px;">
							</el-cascader>
						</el-form-item>
						<el-form-item label="详细地址" prop="addr">
							<el-input class="input" v-model="form.addr"></el-input>
						</el-form-item>
						<el-form-item label="招聘截止时间" prop="timeEnd">
							<el-date-picker
							v-model="form.timeEnd"
							type="datetime"
							placement="bottom-start"
							placeholder="选择日期时间" style="width: 325px;" :disabled="form.isLong=='1'" value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
							<el-radio v-model="form.isLong" label="1" border style="width: 75px;" @click.native.prevent="clickIsLong">长期</el-radio>
						</el-form-item>

						<el-form-item label="其他" prop="tip">
							<el-checkbox-group v-model="tip" @change="tipChange">
								<el-checkbox label="转正机会"></el-checkbox>
								<el-checkbox label="实习证明"></el-checkbox>
								<el-checkbox label="购买保险"></el-checkbox>
								<el-checkbox label="带教服务"></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-form>

				</div>
				<div class="saveBtn">
					<el-button type="primary" size="medium" @click="command()" :disabled="isAdd">保存</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Top from "../../components/top.vue";
import { pcaTextArr ,codeToText } from "../../node_k/element-china-area-data"
import { mapState } from "vuex"
export default {
	components: {
		Top
	},
	data() {
		return {
			form: {
				id:'',
				aid:'',
				title:'',
				hangye:'',
				gangwei:'',
				need:'',
				workCnt:'',
				workType:'',
				workEducation:'',
				workTime:'',
				workExperience:'',
				workSalary:'',
				isMianyi:'',
				province:'',
				city:'',
				addr:'',
				timeEnd:'',
				isLong:'',
				tip:'',
				isDaijiao:'',

			},
			rules:{
				aid:[{required: true, message: '请选择所属企业', trigger: ['blur,change'] }],
				title:[{required: true, message: '请输入职位名称', trigger: ['blur,change'] }],
				hangye:[{required: true, message: '请选择所属行业', trigger: ['blur,change']}],
				gangwei:[{required: true, message: '请选择所属岗位', trigger: ['blur,change'] }],
				need:[{required: true, message: '请输入职位要求', trigger: ['blur,change'] }],
				workCnt:[{required: true, message: '请输入工作内容', trigger: ['blur,change'] }],
				workType:[{required: true, message: '请选择工作形式', trigger: ['blur,change'] }],
				workEducation:[{required: true, message: '请选择学历要求', trigger: ['blur,change'] }],
				workTime:[{required: true, message: '请选择工作时间', trigger: ['blur,change'] }],
				workExperience:[{required: true, message: '请选择工作经验', trigger: ['blur,change'] }],
				city:[{required: true, message: '请选择城市', trigger: ['blur,change'] }]
			},
			isAdd: false,
			companyList:[],
			hangyeList:[],
			gangweiList:[],
			workTypeList:[],
			workEducationList:[],
			workTimeList:[],
			workExperienceList:[],

			options: pcaTextArr,
        	selectedOptions: [],
			tip:[],
		}
	},
	computed: {
		...mapState(['urlParma'])
	},
	methods: {
		// 保存表单验证
		command() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.isAdd = true
					this.save()
				}
			});
		},
		// 保存
		save(item) {
			if(!this.form.aid){
				this.$message.error("请选择企业")
				return;
			}
			this.$http({
				'method': 'post',
				'url': this.$api.pinEdit,
				data: this.form
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message)
					this.$router.go(-1)
				} else {
					this.$message.error(res.data.message)
				}
				this.isAdd = false
			})
		},
		/**
		 * 获取所有企业信息
		 */
		getCompany(){
			this.$http({
				'method': 'post',
				'url': this.$api.companyListAll
			}).then(res => {
				if (res.data.code == 20000) {
					this.companyList = res.data.data.list
				}
			})
		},
		/**
		 * 根据分类名称获取所有下级
		 */
		getDataset(){
			this.$http({
				'method': 'post',
				'url': this.$api.getDatasetSubset,
				data:{sortList:['所属行业','工作方式','学历','工作时间','工作经验']}
			}).then(res => {
				if (res.data.code == 20000) {
					let list = res.data.data.list
					list.forEach(e => {
						if(e.sort=="所属行业"){
							this.hangyeList = e.list
						}else if(e.sort=="工作方式"){
							this.workTypeList = e.list
						}else if(e.sort=="学历"){
							this.workEducationList = e.list
						}else if(e.sort=="工作时间"){
							this.workTimeList = e.list
						}else if(e.sort=="工作经验"){
							this.workExperienceList = e.list
						}
					});
				}
			})
			
		},
		/**
		 * 所属行业改变时
		 * @param e 
		 */
		hangyeChange(e){
			this.hangyeList.forEach(item => {
				if(item.sort==e){
					this.form.gangwei = ''
					this.gangweiList=item.datasetTreeVos
					return false;
				}
			});
		},
		//是否面议
		clickIsMianyi(){
			if(this.form.isMianyi==1){
				this.form.isMianyi = 0
			}else{
				this.form.workSalary = ''
				this.form.isMianyi = "1"
			}
		},
		//是否长期
		clickIsLong(){
			if(this.form.isLong==1){
				this.form.isLong = 0
			}else{
				this.form.timeEnd = ''
				this.form.isLong = "1"
			}
		},
		//地区选择
		addressChange(arr) {
			this.form.province = arr[0]
			this.form.city = arr[0]+"/"+arr[1]+"/"+arr[2]
		},
		//标签修改
		tipChange(){
			this.form.isDaijiao = 0
			this.form.tip = ''
			this.tip.forEach(item => {
				if(item=="带教服务"){
					this.form.isDaijiao = 1
				}else{
					this.form.tip = this.form.tip + item+","
				}
			});
			if(this.form.tip){
				this.form.tip = this.form.tip.replace(/,$/, '')
			}
		},
		//获取详情
		getDetail(){
			this.$http({
				'method': 'get',
				'url': this.$api.pinDetail + this.urlParma.id,
			}).then(res => {
				if (res.data.code == 20000) {
					let detail = res.data.data.detail
					let company = res.data.data.company

					this.form = detail

					this.tip =[]
					if(this.form.tip){
						let arr = this.form.tip.split(",")
						arr.forEach(element => {
							this.tip.push(element)
						});
					}
					if(this.form.isDaijiao == 1){
						this.tip.push("带教服务")
					}
					if(this.form.city){
						let arr = this.form.city.split("/")
						this.selectedOptions = arr

					}
					if(this.form.isLong==1){
						this.form.isLong = "1"
					}
					if(this.form.isMianyi==1){
						this.form.isMianyi = "1"
					}
					
					this.form.companyTitle = company.title
				}
			})
		}

	},
	created() {
		this.getCompany()
		this.getDataset()
		this.getDetail()
	}
}
</script>

<style scoped>
@import url(../../assets/css/userAdd.css);
</style>
